<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/assets/js/css/layui.css">
  <!-- table.css要放在layui下面 -->
  <link rel="stylesheet" href="/assets/css/table.css?v=1">
  <title>Document</title>
</head>

<body>
<div class="container">

  <!-- 上表格 -->
  <div class="half_height">
    <table class="layui-hide" id="test" lay-filter="test"></table>
  </div>

  <!-- 下表格 -->
  <div class="half_height">
    <table class="layui-hide" id="test-2" lay-filter="test-2"></table>
  </div>



  <!-- 上表格头部工具栏 -->
  <script type="text/html" id="toolbarDemo">
    <div>
      搜索：
      <div class="layui-inline custom_width_100">
        <input class="layui-input" name="id" id="test_Reload__input" autocomplete="off">
      </div>
      <button class="layui-btn layui-btn-radius layui-btn-normal" lay-event="search_Test" data-type="reload">
        <i class="layui-icon">&#xe615;</i>
      </button>
      <button class="layui-btn layui-btn-sm" lay-event="showAll" shiro:hasPermission="archives">显示全部</button>
      <button class="layui-btn layui-btn-sm" lay-event="addNew" shiro:hasPermission="archive:add">添加</button>
      <button type="button" class="layui-btn layui-btn-sm" lay-event="upload_top" shiro:hasPermission="archive:upload">
        <i class="layui-icon">&#xe67c;</i> 上传目录
      </button>
      <button type="button" class="layui-btn layui-btn-sm" lay-event="multi_upload">
        批量挂接
      </button>
    </div>
  </script>

  <!-- 上表格行内工具栏 -->
  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="view" shiro:hasPermission="archive:show">查询</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit" shiro:hasPermission="archive:edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" shiro:hasPermission="archive:delete">删除</a>
  </script>

  <!-- 下表格头部工具栏 -->
  <script type="text/html" id="toolbarDemo-2">
    <div>
      搜索：
      <div class="layui-inline custom_width_100">
        <input class="layui-input" name="id" id="test_Reload__input_2" autocomplete="off">
      </div>
      <button class="layui-btn layui-btn-radius layui-btn-normal" lay-event="search_Test_2" data-type="reload">
        <i class="layui-icon">&#xe615;</i>
      </button>
      <button class="layui-btn layui-btn-sm" lay-event="showAll_2" shiro:hasPermission="cases">显示全部</button>
      <button class="layui-btn layui-btn-sm" lay-event="addNew_2" shiro:hasPermission="case:add">添加</button>

      <button type="button" class="layui-btn layui-btn-sm" lay-event='upload_bottom' shiro:hasPermission="case:upload">
        <i class="layui-icon">&#xe67c;</i> 上传目录
      </button>
    </div>
  </script>

  <!-- 下表格行内工具栏 -->
  <script type="text/html" id="barDemo-2">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="view-2" shiro:hasPermission="file:show" >查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit-2" shiro:hasPermission="case:edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del-2" shiro:hasPermission="case:delete">删除</a>
  </script>





  <script src="/assets/js/jquery-3.5.1.min.js"></script>
  <script src="/assets/js/layui.js" charset="utf-8"></script>

  <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

  <script>
    // 此为获取 应设置layui数据表格的高度
    var body_height = $(document.body).outerHeight();
    var layui_table_view__height = body_height / 2;

  </script>


  <!-- 上表格 -->
  <script>
  var message = "请选择档案列表数据！";

    // console.log(params_id);
    layui.use(['table', 'jquery', 'layer', 'form',], function () {
      var table = layui.table;
      var form = layui.form;
      var layer = layui.layer;
      var $ = layui.jquery;

      var renderTable_top = table.render({
        elem: '#test'
        , height: layui_table_view__height
        , toolbar: '#toolbarDemo'
        , loading:false
        , defaultToolbar: ['filter', 'print']
        , id: "top_table"
        , data:[]
        , parseData: function (res) { //res 即为原始返回的数据
          var result;
          // console.log(res);
          if (this.page.curr) {
            result = res.rows.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
          }
          else {
            result = res.rows.slice(0, this.limit);
          }
          // console.log(result);
          return {
            "code": res.status ? res.status : 0, //解析接口状态
            "msg": "成功", //解析提示文本
            "count": res.total, //解析数据长度
            "data": res.rows //解析数据列表
          };
        }
        , cols: [   [
          { field: 'id', width: 80, title: 'ID', sort: true, hide: true }
          ,{ field: 'indent', width: 80, title: 'ID', sort: true, hide: true }
          , { field: 'fileNumber', width: 180, title: '档号', sort: true }
          , { field: 'fondNumber', title: '全宗号', hide: true }
          , { field: 'filesNumber', title: '案卷号', hide: true }
          , { field: 'boxNumber', title: '盒号', hide: true }
          , { field: 'archiveCode', title: '档案馆代码',hide: true  }
          , { field: 'recodeNumber', title: '档案号',hide: true  }
          , { field: 'certNumber', title: '证字号' }
          , { field: 'correctTitle', title: '正题名' }
          , { field: 'maleGender', title: '男性别', hide: true }
          , { field: 'maleName', title: '男姓名', hide: true }
          , { field: 'maleGender', title: '男性别', hide: true }
          , { field: 'maleIdNumber', title: '男身份证', hide: true }
          , { field: 'malebirth', title: '男出生日期', hide: true }
          , { field: 'maleOrigMaritalStatus', title: '男方原婚姻状态', hide: true }
          , { field: 'maleAddrOrWork', title: '男方住址或单位', hide: true }
          , { field: 'maleCertType', title: '男方证件类型', hide: true }
          , { field: 'fondName4', title: '男方身份类型', hide: true }
          , { field: 'maleNationality', title: '男方国籍', hide: true }
          , { field: 'maleNation', title: '男方民族', hide: true }
          , { field: 'maleLocation', title: '男方常住户口所在地', hide: true }
          , { field: 'maleCertNumber', title: '男方证件印制号', hide: true }
          , { field: 'femaleGender', title: '女性别', hide: true }
          , { field: 'femaleName', title: '女姓名', hide: true }
          , { field: 'femaleIdNumbe', title: '女身份证号', hide: true }
          , { field: 'femalebirth', title: '女出生日期', hide: true }
          , { field: 'femaleOrigMaritalStatus', title: '女方原婚姻状态', hide: true }
          , { field: 'femaleAddrOrWork', title: '女方住址或单位', hide: true }
          , { field: 'femaleCertType', title: '女方证件类型', hide: true }
          , { field: 'femaleIdType', title: '女方身份类型', hide: true }
          , { field: 'femaleNationality', title: '女方国籍', hide: true }
          , { field: 'femaleNation', title: '女方民族', hide: true }
          , { field: 'femaleLocation', title: '女方常住户口所在地', hide: true }
          , { field: 'femaleCertNumber', title: '女方证件印制号', hide: true }
          , { field: 'registAuthority', title: '登记机关', hide: true }
          , { field: 'origRegistAuthority', title: '原登记机关', hide: true }
          , { field: 'registNature', title: '登记性质', hide: true }
          , { field: 'origRegistDate', title: '原登记日期', hide: true }
          , { field: 'underAgency', title: '承办机关', hide: true }
          , { field: 'registName', title: '登记员姓名', hide: true }
          , { field: 'delNot', title: '是否删除', hide: true }
          , { field: 'maritalCertRemark', title: '结婚证备注', hide: true }
          , { field: 'origMaritalRegistDate', title: '原结婚登记日期', hide: true }
          , { field: 'origText', title: '原文标识', hide: true }
          , { field: 'otherRemark', title: '其他备注', hide: true }
          , { field: 'businessType', title: '业务类型', hide: true }
          , { field: 'subjectHeading', title: '主题词', hide: true }
          , { field: 'storageTime', title: '保管期限', hide: true,}
          , { field: 'note', title: '附件', hide: true }
          , { field: 'year', title: '年度', hide: true }
          , { field: 'categoryNumber', title: '分类', hide: true }
          , { field: 'storageAddress', title: '实体存放地址', hide: true }
          , { field: 'docPage', title: '文件页数', hide: true }


          // , { field: 'fondName', title: '全宗名称' }
          // , { field: 'fileTitle', title: '文件标题' }
          // , { field: 'categoryName', title: '分类名称' }
          // , { field: 'fileCategory', title: '档案类别', hide: true }
          // , { field: 'storagePeriodCode', title: '保管期限代码', hide: true }
          // , { field: 'secretLevel', title: '密级', hide: true }
          // , { field: 'organization', title: '组织机构', hide: true }
          // , { field: 'remarks', title: '备注', hide: true }
          // , { field: 'storageLocation', title: '存放位置', hide: true }
          // , { field: 'licenseNumber', title: '登记号', hide: true }
          // , { field: 'carriersNumber', title: '载体数量', hide: true }
          // , { field: 'fondNumber', title: '全宗号', hide: true }
          // , { field: 'filesNumber', title: '案卷号', hide: true }
          // , { field: 'boxNumber', title: '盒号', hide: true }
          // , { field: 'annex', title: '附件', hide: true }
          // , { field: 'problem', title: '问题', hide: true }
          // , { field: 'storageTime', title: '保管期限', hide: true, sort: true }
          // , { field: 'categoryNumber', title: '分类号', hide: true }

          , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 160 }
        ]   ]
        , page: true
        , limit: 10
      });

      //头工具栏事件
      table.on('toolbar(test)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        switch (obj.event) {
          case 'search_Test':
            layer.msg(message);
            break;
          case 'showAll':
            layer.msg(message);
            break;
          case 'addNew':
            layer.msg(message);
            break;
          case 'upload_top':
            layer.msg(message);
            break;
          case 'multi_upload':
            layer.msg(message);
            break;
        };
      });

      //监听行工具事件
      table.on('tool(test)', function (obj) {
        var data = obj.data;
        switch (obj.event) {
          case 'edit':
            layer.msg(message);
            break;
          case 'del':
            layer.msg(message);
            break;
          case 'view':
            layer.msg(message);
            break;
        };
      });

    });

  </script>

  <!-- 下表格 -->
  <script>
    layui.use(['table', 'jquery', 'layer', 'form'], function () {
      var table = layui.table;
      var form = layui.form;
      var layer = layui.layer;
      var $ = layui.jquery;


      table.render({
        elem: '#test-2'
        , id: 'bottom_table'
        , url: ""
        , toolbar: '#toolbarDemo-2'
        , loading: false
        , height: layui_table_view__height
        , defaultToolbar: ['filter', 'print']
        , data:[]
        , parseData: function (res) { //res 即为原始返回的数据
          console.log(res);
          return {
            "code": 0, //解析接口状态
            "msg": "成功", //解析提示文本
            "count": res.length || 0, //解析数据长度
            "data": res || []//解析数据列表
          };
        }
        , cols: [   [
          { field: 'id', width: 80, title: 'ID', sort: true, hide: true }
          ,{ field: 'indent', width: 80, title: 'ID', sort: true, hide: true }
          , { field: 'fileNumber', width: 180, title: '档号', sort: true }
          , { field: 'fondNumber', title: '全宗号', hide: true }
          , { field: 'filesNumber', title: '案卷号', hide: true }
          , { field: 'boxNumber', title: '盒号', hide: true }
          , { field: 'archiveCode', title: '档案馆代码',hide: true  }
          , { field: 'recodeNumber', title: '档案号',hide: true  }
          , { field: 'certNumber', title: '证字号' }
          , { field: 'correctTitle', title: '正题名' }
          , { field: 'maleGender', title: '男性别', hide: true }
          , { field: 'maleName', title: '男姓名', hide: true }
          , { field: 'maleGender', title: '男性别', hide: true }
          , { field: 'maleIdNumber', title: '男身份证', hide: true }
          , { field: 'malebirth', title: '男出生日期', hide: true }
          , { field: 'maleOrigMaritalStatus', title: '男方原婚姻状态', hide: true }
          , { field: 'maleAddrOrWork', title: '男方住址或单位', hide: true }
          , { field: 'maleCertType', title: '男方证件类型', hide: true }
          , { field: 'fondName4', title: '男方身份类型', hide: true }
          , { field: 'maleNationality', title: '男方国籍', hide: true }
          , { field: 'maleNation', title: '男方民族', hide: true }
          , { field: 'maleLocation', title: '男方常住户口所在地', hide: true }
          , { field: 'maleCertNumber', title: '男方证件印制号', hide: true }
          , { field: 'femaleGender', title: '女性别', hide: true }
          , { field: 'femaleName', title: '女姓名', hide: true }
          , { field: 'femaleIdNumbe', title: '女身份证号', hide: true }
          , { field: 'femalebirth', title: '女出生日期', hide: true }
          , { field: 'femaleOrigMaritalStatus', title: '女方原婚姻状态', hide: true }
          , { field: 'femaleAddrOrWork', title: '女方住址或单位', hide: true }
          , { field: 'femaleCertType', title: '女方证件类型', hide: true }
          , { field: 'femaleIdType', title: '女方身份类型', hide: true }
          , { field: 'femaleNationality', title: '女方国籍', hide: true }
          , { field: 'femaleNation', title: '女方民族', hide: true }
          , { field: 'femaleLocation', title: '女方常住户口所在地', hide: true }
          , { field: 'femaleCertNumber', title: '女方证件印制号', hide: true }
          , { field: 'registAuthority', title: '登记机关', hide: true }
          , { field: 'origRegistAuthority', title: '原登记机关', hide: true }
          , { field: 'registNature', title: '登记性质', hide: true }
          , { field: 'origRegistDate', title: '原登记日期', hide: true }
          , { field: 'underAgency', title: '承办机关', hide: true }
          , { field: 'registName', title: '登记员姓名', hide: true }
          , { field: 'delNot', title: '是否删除', hide: true }
          , { field: 'maritalCertRemark', title: '结婚证备注', hide: true }
          , { field: 'origMaritalRegistDate', title: '原结婚登记日期', hide: true }
          , { field: 'origText', title: '原文标识', hide: true }
          , { field: 'otherRemark', title: '其他备注', hide: true }
          , { field: 'businessType', title: '业务类型', hide: true }
          , { field: 'subjectHeading', title: '主题词', hide: true }
          , { field: 'storageTime', title: '保管期限', hide: true,}
          , { field: 'note', title: '附件', hide: true }
          , { field: 'year', title: '年度', hide: true }
          , { field: 'categoryNumber', title: '分类', hide: true }
          , { field: 'storageAddress', title: '实体存放地址', hide: true }
          , { field: 'docPage', title: '文件页数', hide: true }


          // , { field: 'fondName', title: '全宗名称' }
          // , { field: 'fileTitle', title: '文件标题' }
          // , { field: 'categoryName', title: '分类名称' }
          // , { field: 'fileCategory', title: '档案类别', hide: true }
          // , { field: 'storagePeriodCode', title: '保管期限代码', hide: true }
          // , { field: 'secretLevel', title: '密级', hide: true }
          // , { field: 'organization', title: '组织机构', hide: true }
          // , { field: 'remarks', title: '备注', hide: true }
          // , { field: 'storageLocation', title: '存放位置', hide: true }
          // , { field: 'licenseNumber', title: '登记号', hide: true }
          // , { field: 'carriersNumber', title: '载体数量', hide: true }
          // , { field: 'fondNumber', title: '全宗号', hide: true }
          // , { field: 'filesNumber', title: '案卷号', hide: true }
          // , { field: 'boxNumber', title: '盒号', hide: true }
          // , { field: 'annex', title: '附件', hide: true }
          // , { field: 'problem', title: '问题', hide: true }
          // , { field: 'storageTime', title: '保管期限', hide: true, sort: true }
          // , { field: 'categoryNumber', title: '分类号', hide: true }

          , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 160 }
        ]
        ]
      });

      //头工具栏事件
      table.on('toolbar(test-2)', function (obj) {
        switch (obj.event) {
          case 'search_Test_2':
            layer.msg(message);
            break;
          case 'showAll_2':
            layer.msg(message);
            break;
          case "upload_bottom":
            layer.msg(message);
            break;
          case 'addNew_2':
            layer.msg(message);
            break;
        }
      });


      //监听行工具事件
      table.on('tool(test-2)', function (obj) {
        var data = obj.data;
        switch (obj.event) {
          case 'edit-2':
            // console.log(data);
            let initData = {};
            // 编辑框的默认值
            layer.msg(message);
            break;
          case 'del-2':
            layer.msg(message);
            break;
          case 'view-2':
            layer.msg(message);
            break;
        };
      });

    });
  </script>
</body>

</html>